<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>炫酷登录</title>
  <link rel="stylesheet" href="/static/w3/day5/css/login.css">
</head>

<body>
  <div class="login">
    <div class="wrapper">
      <h3 class="title">登录</h3>

      <div class="item">
        <div class="img">
          <img src="/static/w3/day5/images/name.png" alt="">
        </div>
        <div class="input">
          <input id="wxid" type="text" placeholder="请输入您的用户名">
          <div class="text">用户名</div>
        </div>
      </div>

      <div class="item">
        <div class="img">
          <img src="/static/w3/day5/images/password.png" alt="">
        </div>
        <div class="input">
          <input id="password" type="text" placeholder="请输入您的密码">
          <div  class="text">密码</div>
        </div>
      </div>

      <div class="button">
        登录
      </div>
    </div>
  </div>
  <div class="rotate-box">
  </div>
  <script src="/static/w3/scripts/lib/axios.js"></script>

  <script>


    const btn = document.querySelector('.button')
    btn.onclick = function () {

      // 1. 获取用户输入的账号和密码
      let wxid=document.querySelector('#wxid').value;
      let password=document.querySelector('#password').value;
      //console.log(wxid+"密码："+password);
      // 2. 判断用户是否输入用户密码，如果没有输入提示用户输入
      if(wxid==''){
        alert('请输入用户名');
        //不再执行之后的代码
        return;
      }
      if(password==''){
        alert('请输入密码');
        //不再执行之后的代码
        return;
      }

      let success=true;



      //执行成功后的动画
      const login = document.querySelector('.login')
      const rotate = document.querySelector('.rotate-box')
      login.classList.add('scale-animation')

      login.addEventListener('animationend', function () {
        login.style.display = 'none'

        rotate.classList.add('active')
      })


      // 3. 如果用户输入了账号和密码，发送ajax请求
      axios
              .post('http://nllcoder.com:8004/v1/login',{
                wxid:wxid,
                password:password
              })
              .then(function (res) {
                console.log(res.data);
                console.log(wxid+"||"+password);
                // 4. 当请求成功之后，获取服务器返回的结果，判断成功还是失败
                if(res.data.success==false)
                {
                  console.log(res.data.message);
                  //当登陆失败，让登录窗口重新显示
                  //延迟1s后显示
                  setTimeout(function () {
                    //当登录失败，让翻转的div隐藏，让登录框显示
                    login.classList.remove('scale-animation');
                    login.style.display='block';
                    rotate.classList.remove('active');
                  },1000)
                }else{
                  // 5. 如果登陆成功，跳转到聊天界面，并且要把当前登陆的用户信息保存起来（保存到本地存储中）
                  console.log('成功'+res.data.message);
                  //设置浏览器跳转到好友列表页面
                  location.href="http://nllcoder.com:8004/v1/friend-list.html"
                }
              })
              .catch(function (err) {
                console.log(err);
              })


    }
  </script>
</body>

</html>